<!--
 * @Author: your name
 * @Date: 2019-10-30 18:25:15
 * @LastEditTime: 2019-11-13 11:43:35
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /-/src/components/modal/modal.vue
 -->
<template>
    <view class="modal-layer"  v-if="visible">
        <div  class="modal-layer" v-if="visible" @click.self="handleLayerClick"></div>
        <view class="container">
            <view class="box" @click.stop="pickerUp">
                <view class="title">成为合伙人</view>
                <view class="content">
                     <view class="phone item">
                        <view class="label">
                            <image
                                src="../../static/images/icon-affairs-name.png"
                                mode="scaleToFill"
                                lazy-load="false">
                            </image>
                        </view>
                        <view class="line"></view>
                        <view class="picker">
                             <input type="text" placeholder="请输入姓名"  placeholder-style="color:#ffffff" data-key="name" @input="changeInputValue">
                        </view>
                    </view>
                    <view class="phone item">
                        <view class="label">
                            <image
                                src="../../static/images/icon-affairs-phone.png"
                                mode="scaleToFill"
                                lazy-load="false">
                            </image>
                        </view>
                        <view class="line"></view>
                        <view class="picker">
                             <input type="number" placeholder="请输入手机号码" maxlength="11" placeholder-style="color:#ffffff" data-key="mobile" @input="changeInputValue">
                        </view>
                    </view>
                    <view class="server-type">
                        <view class="item" @click.stop="pickerDown"
                        ><view class="label">
                            <image
                                src="../../static/images/icon-affairs-local.png"
                                mode="scaleToFill"
                                lazy-load="false">
                            </image>
                        </view>
                        <view class="line"></view>
                        <view class="picker">{{index==-1?"位置":init.area.array[index].area}}</view>
                        </view>
                        <view class="picker-view" v-if="isShow">
                            <picker-view  @change="bindChange" :value="value" indicator-class="picker-class">
                                <picker-view-column>
                                    <view class="picker-item" v-for="(item,index) in init.area.array" :key="index">{{item.area}}</view>
                                </picker-view-column>
                            </picker-view>
                        </view>
                    </view>
                     <view class="remark-box item">
                        <view class="label">
                            <image
                                src="../../static/images/icon-affairs-remark.png"
                                mode="scaleToFill"
                                lazy-load="false">
                            </image>
                        </view>
                        <view class="remark">
                             <textarea  placeholder="备注"  placeholder-style="color:#000000" data-key="remark" @input="changeInputValue"></textarea>
                        </view>
                    </view>
                    <view class="submit-btn" @click="teamwork">提交</view>
                </view>
                <!-- <view class="footer">
                    <image
                        src="../../static/images/modal-footer.png"
                        mode="scaleToFill"
                        lazy-load="false">
                    </image>
                </view> -->
            </view>
        </view>
    </view>
</template>
<script>
let app = getApp();
import Evaluate from "@/components/evaluate/evaluate.vue";
import Swiper from "@/components/swiper/swiper.vue";
import InterServer from "@/common/config/server";
import API from "@/common/config/config";
import Vue from "vue";
import {checkPhoneNumber} from '@/common/js/common'
export default {
    props: {
        visible: {
            type: Boolean,
            default: false
        }
        },
  data() {
    return {
      array:[],
      index:0,
      value:[0],
      isShow:false,
      mobile:"",
      init:{
        name:"", //申请人姓名
        mobile:"", //申请人手机号
        remark:"", //申请人备注
        area:{
            array:[
                
            ],
        }
    },
    };
  },
  created() {
    console.log(this.coinType)
    this.getArea()
  },
  methods: {
    //picker选择
    bindChange: function (e) {
        const val = e.detail.value
        this.index=val[0];
        this.value=val;
    },
     //点击展开picker
     pickerDown(){
         this.isShow=true;
         this.index=this.index;
     },
     //点击收起
     pickerUp(){
        this.isShow=false;
     },
    //获取地区
    getArea(){
        InterServer.area({

        }).then(res=>{
            if(res.code==200){
                this.init.area.array=this.init.area.array.concat(res.data)
            }
        })
    },
    //合伙人申请
     teamwork(){
        let init=this.init
        if(init.name==""){
            Vue.showCustomToast("请输入姓名")
            return false
        }
        if(checkPhoneNumber(init.mobile))
        InterServer.teamwork({
            city: init.area.array[this.index].area,
            mobile: init.mobile,
            name: init.name,
            pageNum: 0,
            pageSize: 10,
            remark: init.remark,
        }).then(res=>{
            if(res.code==200){
                Vue.customNavigateTo('./success')
            }
        })
    },
  
    changeInputValue(e) {
        console.log(e)
        let [key,index]=[e.currentTarget.dataset.key,e.target.value]
        this.init[key]=index
	},
     handleLayerClick(){
        this.$emit('handlelayerclick'); //关闭回调事件
     }   
  }
};
</script>
<style lang="less" scoped>
.modal-layer{
    width: 100%;
    height: 100%;
    background:rgba(1,1,1,0.65);
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index:199;
    .container{
        position: absolute;
        width:682upx;
        height:784upx;
        border-radius:20upx;
        left: 50%;
        top: 50%;
        margin-left: -343upx;
        margin-top: -400upx;
        background-image: url("../../static/images/modal-layer-bg.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        border-radius: 20upx;
        z-index: 999;
        .box{
            width: 100%;
            height: 100%; 
            position: absolute;
            top: 0;
            left: 0;
            .title{
                height:50upx;
                font-size:36upx;
                font-family:PingFang-Semibold;
                font-weight:bold;
                line-height:50upx;
                color:#ffffff;
                text-align: center;
                margin: 44upx 0 50upx;
            }
            .content{
                .server-type{
                    position: relative;
                }
                .item{
                    display: flex;
                    width: 490upx;
                    margin: 0 auto;
                    margin-bottom:37upx;
                    align-items: center;
                    border-bottom:1upx solid rgba(255,255,255,0.78);
                    .label{
                        width: 72upx;
                        height:42upx;
                        font-size:30upx;
                        font-family:PingFang-Semibold;
                        font-weight:bold;
                        line-height:42upx;
                        color:rgba(51,51,51,1);
                        text-align: center;
                        image{
                            width: 28upx;
                            height: 28upx;
                        }
                    }
                    .line{
                        width:1upx;
                        height:24upx;
                        border:1px solid rgba(255,255,255,1);
                    }
                    .picker{
                        width:372upx;
                        height:50upx;
                        line-height:50upx;
                        box-shadow:0px 3upx 6upx rgba(0,136,255,0.27);
                        border-radius:22upx;
                        display: flex;
                        justify-content: center;
                        justify-items: center;
                        font-size:28upx;
                        font-family:PingFang-Semibold;
                        font-weight:bold;
                        color:#ffffff;
                    }
                    .remark{
                        width:427upx;
                        height:92upx;
                        background:rgba(255,255,255,1);
                        border:1px solid rgba(112,112,112,1);
                        textarea{
                            padding: 10upx 25upx;
                            width:427upx;
                            height:92upx;
                        }
                    }
                   .picker input {
                        width:250upx;
                        height:50upx!important;
                        line-height:50upx!important;
                        color:#ffffff;
                    }
                }
                .remark-box{
                   border: none;
                   align-items: end;
                   margin-bottom: 44upx;
                }
                .submit-btn{
                    width:518upx;
                    height:58upx;
                    line-height: 58upx;
                    background:rgba(0,136,255,1);
                    border-radius:29upx;
                    font-size:36upx;
                    font-family:PingFang-Semibold;
                    font-weight:bold;
                    color:rgba(255,255,255,1);
                    text-align: center;
                    margin: 0 auto;
                }
                .picker-view{
                    width:440upx;
                    height:210upx;
                    background:rgba(255,255,255,1);
                    border-top-left-radius: 20upx;
                    border-top-right-radius: 20upx;
                    position: absolute;
                    top: 44upx;
                    left: 50%;
                    margin-top: 0upx;
                    margin-left: -180upx;
                    z-index: 99999;
                    uni-picker-view{
                        width: 100%;
                        height: 100%;
                    }
                    uni-picker-view-column{
                        border-top-left-radius: 20upx;
                        border-top-right-radius: 20upx;
                    }
                    .uni-picker-view{
                        width: 100%;
                        height: 100%;
                        z-index: 999999;
                    }
                    picker-view {
                        height: 100%;
                    }
                    .picker-item{
                        text-align: center;
                        margin: auto;
                        height:34px;
                        line-height: 34px;
                        font-family:PingFang-Semibold;
                        font-weight:bold;
                        color:rgba(102,102,102,1);
                        font-size: 28upx;
                    }
                }
            }
            .input-placeholder{
                color: #ffffff;
            }
            .footer{
                 width:241upx;
                 height:74upx;
                 margin: 58upx auto 0;
                image{
                    width:241upx;
                    height:74upx;
                }
            }
        }
    }
}
</style>